<template>
	<view >
		<view :class="[empty ? '' : 'padding-lr-sm']">
			<!-- 空白页 -->
			
			<use-empty v-if="empty" e-style="round" e-type="cart" :btn-tip="false" tip="无订单数据"></use-empty>
			<view v-else class="padding bg-main border-radius margin-top-sm pos-r" @click="toDesc(item)" v-for="(item, idx) in datas" :key="idx">
				<view class="dflex-b">
					<view>
						<view class="fwb">商品编码:{{ item.commodityId  }}</view>
						<view  class="ft-dark fs-xxs">价格:{{item.price}},数量:{{item.quantity}},手续费:{{item.tradeFee}}</view>
						<view  class="ft-dark fs-xxs">{{$api.format(item.createTime)}}</view>
					</view>
					<view class="dflex-c dflex-flow-c">
						<view class="">
							￥<text class="fwb">{{Number(item.payment)+Number(item.tradeFee)}}</text>
						</view>
					</view>
				</view>
				<view class="bg-base fs-xxs pos-a pos-top pos-right" style="border-bottom-left-radius: 20rpx; padding: 2rpx 10rpx;">
					{{ item.tradeType==1?"摘单成功":"挂单成功"}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {get_order} from "../../../js_sdk/apis/order.js"
	export default {
		data() {
			return {
				empty: false,
				state: '',
				zidian:{
					1:"支付中",
					2:"支付成功",
					3:"支付失败",
					4:"已关闭"
				},
				datas: []
			};
		},
		onLoad(options) {
			this.loadData();
		},
		methods: {
			toDesc(item){
				console.log(item)
				uni.navigateTo({
					url: `order-detail?tradeNo=${item.tradeNo}&tradeType=${item.tradeType}&commodityId=${item.commodityId}&payment=${item.payment}&price=${item.price}&quantity=${item.quantity}&tradeFee=${item.tradeFee}&createTime=${item.createTime}`
				})
			},
			loadData() {
				get_order({offset:1000}).then(res=>{
					console.log(res)
					this.datas=res.data&&res.data.content&&res.data.content.list
					this.empty = !(this.datas && this.datas.length > 0);
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}
	/* 订单状态区 */
	.navbar-area {
		white-space: nowrap;
	}
	
	.state-area {
		height: 7vh;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
	}
	
	.nav-item {
		flex: 1;
	
		&.active {
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				transform: translate(-50%);
				bottom: 0;
				width: 44px;
				height: 0;
				border-bottom: 2px solid $base-color;
			}
		}
	}
	
</style>
